<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>我的作业</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="../css/main.css">
	<link rel="stylesheet" href="css/my_homework.css">
	<style>
		.homework_head {
			height: 35px;
			width: 96%;
			border-bottom: 1px solid #ddd;
		}

		.time {
			line-height: 35px;
			margin-left: 5px;
			display: inline-block;
		}

		.result {
			height: 25px;
			width: 90px;
			float: right;
			font-size: 18px;
			letter-spacing: 3px;
			text-align: center;
			margin-top: 2px;
			margin-right: 5px;
			border-radius: 5px;
			color: #0a7c25;
			font-weight: bold;
			border: 2px solid #0a7c25;
		}

		.result3 {
			height: 25px;
			width: 90px;
			float: right;
			font-size: 18px;
			letter-spacing: 3px;
			text-align: center;
			margin-top: 2px;
			margin-right: 5px;
			border-radius: 5px;
			color: #cb0101;
			font-weight: bold;
			border: 2px solid #cb0101;
		}

		.homework_name {
			font-size: 20px;
			margin: 0 0;
			margin-top: -5px;
			letter-spacing: 5px;
		}

		.info {
			width: 90%;
			margin-top: 10px;
			margin-left: 1%;
		}
	</style>
</head>

<body>
	<div id="container">
		<div class="contain" id="vue-root">
			<div class="header">
				<div class="header_title">课后作业</div>
				<a onclick="history.back()">
					<img src="../image/return.png" alt="" class="return">
				</a>
			</div>

			<div class="time_all header-after">
				<input class="date" type="date" v-model="date" />
			</div>
			<!-- 老师发布的作业 -->
			<div class="content" style="margin-top: 0;background: none;">
				<div class="homework" v-for="homework in homeworks" :key="homework.id">
					<a class="homework_content" :href="'student_homework_item.html?id='+homework.id">
						<div class="homework_head">
							<div class="time" v-text="format(homework.publishTime)"></div>
							<div class="result" v-if="homework.status==2">已批改</div>
							<div class="result3" v-else-if="homework.status==1">未批改</div>
						</div>
						<h3 class="homework_name info" v-text="homework.courseName+'作业'"></h3>
						<div class="homework_time info" v-text="format(homework.publishTime)"></div>
						<div class="homework_intro info" v-text="homework.title"></div>
					</a>
				</div>
			</div>
		</div>
	</div>


	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				date: dayjs().format('YYYY-MM-DD'),
				homeworks: []
			},
			created: function () {
				this.getData();
			},
			methods: {
				img: function (status) {
					if (status == 0) return '../image/homework_undone.svg';
					if (status == 1) return '../image/homework_submitted.svg';
					if (status == 2) return '../image/homework_checked.svg';
					return null;
				},
				getData: function () {
					if (!this.date) return;
					axios.get('/s/homework/list', {
						params: { date: this.date }
					}).then(function (res) {
						this.homeworks = res.data;
					}.bind(this));
				},
				format: function (time) {
					return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
				}
			},
			watch: {
				date: function (newValue, oldValue) {
					this.getData();
				}
			}
		});

		updateUnread('homework');
	</script>

</body>

</html>